import { WebGLComponent } from '../../core/webgl';
import { Color } from '../../core/util';

export class S03 extends WebGLComponent {
    static desc = '顶点缓冲区使用';
    protected vs: string = `
        attribute vec4 a_Position;
        void main() {
            gl_Position = a_Position;
        }
    `;
    protected fs: string = `
        void main() {
            //设置颜色
            gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
        }
    `;
    protected vertexData: number[][] = [
        [0.0,  0.0,  0.0],
        [-1.0, -1.0, 0.0],
        [1.0,  -1.0, 0.0]
    ];

    public renderWebGl() {
        this.gl.clearColor(250 / 255, 250 / 255, 250 / 255, 1)
        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
        let shaderProgram =  this.createProgram(this.vs, this.fs);
        // this.createPrograme();
        // let num = this.setVertexBuffer(this.vertexData);
        let num = this.setVertexBufferDy(this.vertexData);
        this.bindVertex(shaderProgram);
        this.draw(0, num);
    }
    /**
     *
     *
     * @protected
     * @param {number[][]} vertexData
     * @returns
     * @memberof S03
     */
    protected setVertexBuffer(vertexData: number[][]) {
        //创建缓冲区对象
        var vertexBuffer = this.gl.createBuffer();
        //将缓冲区对象绑定到目标
        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);

        //向缓冲区写入数据
        let temp: number[] = [];
        vertexData.forEach(vertex => {
            vertex.forEach(point => {
                temp.push(point);
            })
        });
        // Float32Array 单精度
        // Float16Array 半精度
        
        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(temp), this.gl.STATIC_DRAW);
        return this.vertexData[0].length;
    }
    protected setVertexBufferDy(vertexData: number[][]) {
       //创建缓冲区对象
       var vertexBuffer = this.gl.createBuffer();
       //将缓冲区对象绑定到目标
       this.gl.bindBuffer(this.gl.ARRAY_BUFFER, vertexBuffer);

       //向缓冲区写入数据
       let temp: number[] = [];
       let count = 0;
       vertexData.forEach(vertex => {
           vertex.forEach(point => {
               temp.push(point);
               count++;
           });
       });
       this.gl.bufferData(this.gl.ARRAY_BUFFER, 4 * count, this.gl.STATIC_DRAW);
       // bufferSubData(type, offset, data);
       this.gl.bufferSubData(this.gl.ARRAY_BUFFER, 0, new Float32Array(temp));
       return this.vertexData[0].length;
    }
    protected bindVertex(program: WebGLProgram) {
        //获取坐标点
        var a_Position = this.gl.getAttribLocation(program, 'a_Position');
        //将缓冲区对象分配给a_Position变量

        this.gl.vertexAttribPointer(a_Position, 2, this.gl.FLOAT, false, 4 * 2, 0);
        //连接a_Position变量与分配给它的缓冲区对象
        this.gl.enableVertexAttribArray(a_Position);
    }
    protected draw(first: number, count: number) {
        // 清除指定<画布>的颜色
        this.gl.clearColor(0.0, 0.0, 0.0, 1.0);

        // // 清空 <canvas>
        this.gl.clear(this.gl.COLOR_BUFFER_BIT);

        this.gl.drawArrays(this.gl.TRIANGLES, first, count);
    }
}